<script setup lang="ts">
import { getChannelsApi } from '@/apis/article'
import type { Channel } from '@/types/article'
import { defineProps, ref } from 'vue'

defineProps(['modelValue'])
const emit = defineEmits(['update:model-value'])
const channelOptions = ref<Channel[]>([])
// 获取频道列表
const getChannelOptions = async () => {
  const res = await getChannelsApi()
  channelOptions.value = res.channels
}
getChannelOptions()
// 选择频道
const changeChannel = (channelId: number) => {
  // 子组件传递频道ID给父组件
  emit('update:model-value', channelId)
}
</script>

<template>
  <!-- :value="value" 把父组件的频道ID赋值个下拉框，显示对应的频道 -->
  <el-select
    @change="changeChannel"
    :model-value="modelValue"
    clearable
    placeholder="请选择"
    style="width: 240px"
  >
    <el-option v-for="item in channelOptions" :key="item.id" :label="item.name" :value="item.id" />
  </el-select>
</template>

<style scoped lang="less"></style>
